<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>AsyncFlow代码生成器</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入JQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
    <style scoped>
        /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        }

        .item:hover {
            background-color: #f1f1f1;
            cursor: move;
        }

        /*选中样式*/
        .chosen {
            border: solid 2px #3089dc !important;
        }


        /*公共节点悬浮在上面*/
        .box_relative_aside {
            position: fixed;
            left: 30px;
            top: 40px;
            z-index: 999;
            width: 600px;
        }

        .box_relative_main_head {
            position: fixed;
            top: -1px;
            padding-top: 40px;
            background: white;
            z-index: 999;
        }

        .box_relative_main_foot {
            margin-top: 250px;
            /*position: relative;*/
            /*right: 30px;*/
            /*top: 300px;*/
        }


    </style>
</head>
<body style="padding:10px;">

<div id="app" style="width: 100%">
    <el-container>
        <el-aside width="600px">
            <div class="box_relative_aside">
                <el-form :model="asyncFlowPubNodeInfoList" ref="asyncFlowPubNodeInfoList" label-width="600px">
                    <el-select v-model="selectPubNodevalue" multiple filterable placeholder="请选择" style="width:85%">
                        <el-option
                                v-for="item in PubNodeOptions"
                                :key="item.value"
                                :label="item.label+'【'+item.value+'】'"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-tooltip effect="dark" content="将选择的公共节点添加到右侧异步流中" placement="right-start">
                        <el-button @click.prevent="addPubNode(selectPubNodevalue)">添加</el-button>
                    </el-tooltip>
                </el-form>
            </div>
        </el-aside>
        <el-main>
            <el-form :model="velocityRequest" ref="velocityRequest" label-width="150px">
                <div class="box_relative_main_head">
                    <el-form-item prop="asyncFlowModuleName" label="异步流模块英文名称">
                        <el-input v-model="velocityRequest.AsyncFlowModuleName" style="width: 300px"></el-input>
                        <el-select v-model="selectManagervalue" filterable placeholder="请选择" style="width:510px">
                            <el-option
                                    v-for="item in ManagerOptions"
                                    :key="item.value"
                                    :label="item.label+'【'+item.value+'】'"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-tooltip effect="dark" content="加载选择Manager的所有节点" placement="right-start">
                            <el-button type="primary" @click="loadManagerNode(selectManagervalue)">加载</el-button>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item prop="asyncFlowDes" label="异步流模块中文描述">
                        <el-input v-model="velocityRequest.AsyncFlowModuleDes"></el-input>

                    </el-form-item>
                    <el-form-item prop="asyncFlowMaintainName" label="异步流负责人">
                        <el-input v-model="velocityRequest.AsyncFlowMaintainName"></el-input>
                    </el-form-item>
                    <el-form-item prop="asyncFlowTimeOutsLimit" label="异步流超时时间">
                        <el-input v-model="velocityRequest.AsyncFlowTimeOutsLimit"></el-input>
                    </el-form-item>
                </div>
                <div class="box_relative_main_foot">
                    <draggable v-model="velocityRequest.asyncFlowNodeInfoList" handle=".mover" chosen-class="chosen"
                               force-fallback="true"
                               animation="300">
                        <transition-group>
                            <el-form-item
                                    v-for="(asyncFlowNodeInfo, index) in velocityRequest.asyncFlowNodeInfoList"
                                    :label="'节点' + (index+1)"
                                    :key="asyncFlowNodeInfo.key">
                                <el-button type="primary" class="mover" icon="el-icon-d-caret"
                                           style="width: 55px"></el-button>
                                <el-select v-model="asyncFlowNodeInfo.ExecuteName" placeholder="请选择"
                                           style="width: 80px">
                                    <el-option
                                            v-for="item in ExecuteOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-input v-model="asyncFlowNodeInfo.AsyncFlowNodeFileName"
                                          style="width: 300px"></el-input>
                                <el-select v-model="asyncFlowNodeInfo.Async" placeholder="请选择" style="width: 80px">
                                    <el-option
                                            v-for="item in AsyncOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-input v-model="asyncFlowNodeInfo.AsyncFlowNodeDes" style="width: 280px"></el-input>
                                <el-button @click.prevent="removeNode(asyncFlowNodeInfo)">删除</el-button>
                            </el-form-item>
                        </transition-group>
                    </draggable>
                    <el-form-item>
                        <el-checkbox v-model="velocityRequest.replaceManager" label="覆盖Manager" border ></el-checkbox>
                        <el-button type="primary" @click="submitForm('velocityRequest')">生成</el-button>
                        <el-button @click="addNode()">新增节点</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-main>
    </el-container>
</div>

<script>
    // 全局注册组件 拖拽组件
    Vue.component('vuedraggable', window.vuedraggable);
    var app = new Vue({
        el: '#app',
        components: {
            vuedraggable: window.vuedraggable,//当前页面注册组件
        },
        data() {
            return {
                drag: false,
                velocityRequest: {

                    asyncFlowNodeInfoList: [],
                    AsyncFlowModuleName: '',
                    AsyncFlowModuleDes: '',
                    AsyncFlowMaintainName: '',
                    AsyncFlowTimeOutsLimit: '',
                    replaceManager: false
                },
                ExecuteOptions: [{
                    value: 'Validator',
                    label: '验证'
                }, {
                    value: 'GetData',
                    label: '查询'
                }, {
                    value: 'GetDataPub',
                    label: '公共查询'
                }, {
                    value: 'Operator',
                    label: '操作'
                }, {
                    value: 'Sync',
                    label: '同步'
                }, {
                    value: 'Async',
                    label: '异步'
                }],
                AsyncOptions: [{
                    value: true,
                    label: '异步'
                }, {
                    value: false,
                    label: '同步'
                }],
                PubNodeOptions: [],//系统中所有的公共节点下拉集合
                selectPubNodevalue: '',
                ManagerOptions: [],//系统中所有的Manager下拉集合
                selectManagervalue: '',
                asyncFlowPubNodeInfoList: [],//公共节点集合
                asyncFlowValidatorNodeInfoList: [],//验证节点集合
                asyncFlowGetDataNodeInfoList: [],//数据查询节点集合
                asyncFlowOperatorNodeInfoList: [],//操作节点集合
                asyncFlowPubSyncInfoList: [],//同步节点集合
                asyncFlowPubAsyncInfoList: [],//异步节点集合
                moveAsyncFlowNodeFileName: 'moveAsyncFlowNodeFileName',
                notifyPromise: Promise.resolve()
            };
        },
        mounted: function () {
            this.loadPubNode();
        },
        methods: {
            loadPubNode() {
                const self = this;
                $.ajax({
                    type: "POST",
                    url: window.location.origin + "/travel/eorderservice/asyncFlowCode/loadPubNodeManager",
                    dataType: "json",
                    contentType: "application/json",
                    success: function (result) {
                        //self.asyncFlowPubNodeInfoList = result;
                        for (let i = 0; i < result.length; i++) {
                            if (result[i].ExecuteName === "Manager") {
                                self.ManagerOptions.push({
                                    value: result[i].AsyncFlowNodeFileName,
                                    label: result[i].AsyncFlowNodeDes
                                });
                            } else {
                                self.PubNodeOptions.push({
                                    value: result[i].AsyncFlowNodeFileName,
                                    label: result[i].AsyncFlowNodeDes
                                });
                                self.asyncFlowPubNodeInfoList.push(result[i]);
                            }

                        }
                        self.$forceUpdate();
                    }

                });
            },
            submitForm(formName) {
                const data = this.velocityRequest;
                $.ajax({
                    type: "POST",
                    url: window.location.origin + "/travel/eorderservice/asyncFlowCode/buildAsyncFlowCodeV2",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function (result) {
                        alert(result);
                    }

                });
            },
            loadManagerNode(asyncFlowModuleName) {
                const self = this;
                self.velocityRequest.asyncFlowNodeInfoList = [];
                if (asyncFlowModuleName === null || asyncFlowModuleName === "") {
                    alert("请选择具体Manager");
                    return;
                }
                $.ajax({
                    type: "GET",
                    url: window.location.origin + "/travel/eorderservice/asyncFlowCode/loadManagerNode",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    data: "asyncFlowModuleName=" + asyncFlowModuleName,
                    success: function (result) {
                        self.velocityRequest.AsyncFlowMaintainName = result.AsyncFlowMaintainName;
                        self.velocityRequest.AsyncFlowModuleDes = result.AsyncFlowModuleDes;
                        self.velocityRequest.AsyncFlowModuleName = result.AsyncFlowModuleName;
                        self.velocityRequest.AsyncFlowTimeOutsLimit = result.AsyncFlowTimeOutsLimit;
                        for (let i = 0; i < result.asyncFlowNodeInfoList.length; i++) {
                            self.addNode(result.asyncFlowNodeInfoList[i]);
                        }
                    }

                });
            },
            removeNode(item) {
                const index = this.velocityRequest.asyncFlowNodeInfoList.indexOf(item);
                if (index !== -1) {
                    this.velocityRequest.asyncFlowNodeInfoList.splice(index, 1)
                }
            },
            addNode(item) {
                if (item) {
                    item.key = Date.now();

                    const length = this.velocityRequest.asyncFlowNodeInfoList.length;
                    let index = length + 1;
                    for (let i = length - 1; i >= 0; i--) {
                        if (item.ExecuteName === "GetDataPub" || item.ExecuteName === "GetData") {
                            if (this.velocityRequest.asyncFlowNodeInfoList[i].ExecuteName === "GetDataPub" || this.velocityRequest.asyncFlowNodeInfoList[i].ExecuteName === "GetData") {
                                index = i + 1;
                                break;
                            }
                        } else {
                            if (this.velocityRequest.asyncFlowNodeInfoList[i].ExecuteName === item.ExecuteName) {
                                index = i + 1;
                                break;
                            }
                        }
                    }
                    this.velocityRequest.asyncFlowNodeInfoList.splice(index, 0, item);
                    //this.velocityRequest.asyncFlowNodeInfoList.push(item);
                } else {
                    this.velocityRequest.asyncFlowNodeInfoList.push({
                        ExecuteName: 'Operator',
                        AsyncFlowNodeFileName: '',
                        Async: false,
                        AsyncFlowNodeDes: '',
                        AsyncFlowNodePackagePath: '',
                        AsyncFlowNodeFilePath: '',
                        Public: false,
                        key: Date.now()
                    });
                }
            },
            addPubNode(item) {
                if (item) {
                    for (let i = 0; i < item.length; i++) {
                        //先判断集合中是否存在本次添加的节点，如果存在直接跳出
                        let findnode = this.velocityRequest.asyncFlowNodeInfoList.filter((m) => {
                            return m.AsyncFlowNodeFileName === item[i]
                        });
                        if (findnode.length >= 1) {
                            //alert(findnode[0].AsyncFlowNodeFileName + "【" + findnode[0].AsyncFlowNodeDes + "】已存在不进行添加");
                            let msg = findnode[0].AsyncFlowNodeFileName + "【" + findnode[0].AsyncFlowNodeDes + "】已存在不进行添加";
                            this.notify(msg, "warning");
                            continue;
                        }
                        //找到需要添加的集合
                        let node = this.asyncFlowPubNodeInfoList.filter((m) => {
                            return m.AsyncFlowNodeFileName === item[i]
                        });
                        if (node && node.length === 1) {
                            this.addNode(node[0]);
                            let msg = node[0].AsyncFlowNodeFileName + '【' + node[0].AsyncFlowNodeDes + ']添加成功';
                            this.notify(msg, "success");
                        }
                        //this.velocityRequest.asyncFlowNodeInfoList.splice(2,0,"William")
                    }
                    //添加完成之后 清空选中的公共节点
                    this.selectPubNodevalue = [];
                }

            },
            notify(msg, type) {
                let title = "";
                let duration = "";
                if (type === "success") {
                    title = "成功";
                    duration = 1000;
                }
                if (type === "warning") {
                    title = "警告";
                    duration = 0;
                }
                this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(() => {
                    this.$notify({
                        title: title,
                        message: msg,
                        dangerouslyUseHTMLString: true,
                        duration: duration,
                        type: type,
                        position: "top-right"
                    });
                })
            },
        }
    });
</script>
</body>
</html>